<template>
    <div style="height: 100%">
        <div style="height: 234px; padding-top: 10px">
            <timeLine :items="timelineItems" />
        </div>
        <div class="box">
            <basicTableComponents
                :columns="columns"
                :data="tableData"
                @rowClick="rowClick"
                style="width: 460px;"
            >
                <template #tooltip="{ row }">
                    <el-tooltip :content="row.companyName" placement="top">
                        {{ row.companyName }}
                    </el-tooltip>
                </template>
            </basicTableComponents>
        </div>
    </div>
</template>

<script setup lang="ts">
import basicTableComponents from '../components/basicTableComponents.vue'
import timeLine from '../components/timeLine.vue'
const columns = [
    {
        prop: 'name',
        label: '小区名称',
        width: '100'
    },
    {
        prop: 'address',
        label: '对应街道',
        slot: 'tooltip'
    },
    {
        prop: 'companyName',
        label: '企业名称',
        slot: 'tooltip'
    },
    {
        prop: 'grade',
      label: '服务等级',
        width: '70'
    },
    {
        prop: 'pay',
      label: '收费标准',
        width: '60'
    },
    {
        prop: 'percent',
      label: '收缴率(%)',
        width: '70'
    }
]
const tableData = [
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
      companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    },
    {
        name: '海珀兰轩三区',
        address: '金凤区长城花园A区',
        grade: '三级',
        companyName: '银川中房物业集团有限公司',
        pay: '0.35',
        percent: 30
    }
]
const timelineItems = [
    {
        image: 'http://wyjg.yczhjf.com:8003/static/img/15.5c237265.jpg',
        name: '松芝全球天下消防水带'
    },
    {
        image: 'http://wyjg.yczhjf.com:8003/static/img/16.ba014104.jpg',
        name: '松芝万科锦苑消防室'
  },
  {
    image: 'http://wyjg.yczhjf.com:8003/static/img/17.97abf020.jpg',
        name: '松芝万科锦苑消防室'

    }
    // 添加更多节点
]
</script>

<style scoped>
.box {
    height: calc(100% - 244px);
}
</style>